import React, { useState, useEffect } from "react";
import request from "../../utils/requests";
import {
    Button,
    Row,
    Col,
    Image,
    Carousel,
} from "antd";

export default function Search() {
    const [homedata, setHomedata] = useState([]);
    useEffect(async () => {
        const push = location.pathname.split("/").length - 1;
        const id = location.pathname.split("/")[push];
        const data = {
            goods: decodeURI(id)
        }
        const searchdata = await request('/goods/search', { method: 'POST', data })
        console.log(searchdata);
        if (searchdata.data.success) {
            setHomedata([...searchdata.data.query.goods_search])
        }
    }, []);
    return (
        <div className="w-full">
            {/* 轮播图banner */}
            <Carousel autoplay>
                <div>
                    <img
                        src="/public/homeimg/1.jpg"
                        alt=""
                        style={{ width: "100%", height: "520px" }}
                    />
                </div>
                <div>
                    <img
                        src="/public/homeimg/2.jpg"
                        alt=""
                        style={{ width: "100%", height: "520px" }}
                    />
                </div>
                <div>
                    <img
                        src="/public/homeimg/4.jpg"
                        alt=""
                        style={{ width: "100%", height: "520px" }}
                    />
                </div>
                <div>
                    <img
                        src="/public/homeimg/5.jpg"
                        alt=""
                        style={{ width: "100%", height: "520px" }}
                    />
                </div>
            </Carousel>
            <div className="wrapper">
                <Row className="m-4 justify-between">
                    {homedata.map((item) => {
                        return <Col style={{ display: "flex", maxWidth: "25%", padding: "0.5rem 0" }} key={item.id}>
                            <div className="mx-6" style={{ left: "-2.5rem" }}>
                                <Image
                                    src={"../avatars/" + item.photo1}
                                    alt=""
                                    width={200}
                                    height={200}
                                    title={item.label}
                                    fallback=""
                                />
                                <p className="my-2">
                                    {item.name}
                                </p>
                                <Button className="m-auto" danger ghost>
                                    ￥{item.price}
                                </Button>
                            </div>
                        </Col>
                    })}
                </Row>
            </div>
        </div>
    )
}
